<template>
  <div class="buju">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
        ><div class="">
          <h1>响应式页面布局</h1>
        </div></el-col
      >
    </el-row>
    <el-row :gutter="10" type="flex" align="middle" class="flex-wrap">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6" class="hidden-sm-and-down"
        ><div class="grid-content bg-purple">
          <span>电脑端显示</span>
          <p></p>
          <i class="el-icon-edit">修改</i>
          <i class="el-icon-share">分享</i>
          <i class="el-icon-delete">删除</i>
        </div></el-col
      >
      <el-col :xs="24" :sm="24" :md="8" :lg="9" :xl="6"
        ><div class="grid-content bg-purple-light">
          <span>电脑端显示/移动端显示</span>
          <p></p>
          <el-link type="primary" :disabled="val" href="http://www.baidu.com"
            >主要链接</el-link
          >
          <i class="el-icon-s-tools"></i>
          <i class="el-icon-warning"></i>
          <i class="el-icon-circle-close"></i></div
      ></el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="9" :xl="6"
        ><div class="grid-content bg-purple">
          <span>电脑端显示/移动端显示</span>
          <p></p>
          <el-link type="primary" :disabled="val" href="http://www.baidu.com"
            >主要链接</el-link
          >
          <i class="el-icon-s-ticket"></i>
          <i class="el-icon-s-opportunity"></i>
          <i class="el-icon-document-copy"></i></div
      ></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6" class="hidden-sm-and-down"
        ><div class="grid-content bg-purple-light">
          <span>电脑端显示</span>
          <p></p>
          <i class="el-icon-edit">修改</i>
          <i class="el-icon-share">分享</i>
          <i class="el-icon-delete">删除</i>
        </div></el-col
      >
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
        ><div class="grid-content bg-purple-light">
          <el-button type="primary" @click="abc" :loading="buttonLoad"
            >禁用/启用 超级链接</el-button
          >
        </div></el-col
      >
    </el-row>
  </div>
</template>
<script>
import "element-ui/lib/theme-chalk/display.css";
export default {
  name: "Buju",
  components: {},
  props: [],
  data() {
    return {
      val: true,
      buttonLoad: false,
    };
  },
  methods: {
    abc() {
      this.buttonLoad = !this.buttonLoad;
      setTimeout(() => {
        this.val = !this.val;
        this.buttonLoad = !this.buttonLoad;
      }, 3000);
    },
  },
};
</script>
<style>
.flex-wrap {
  flex-wrap: wrap; /* 这里设置flex布局的换行特性 */
}
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
div {
  font-family: "Hiragino Sans GB";
  font-weight: bolder;
}
</style>
    
